<!DOCTYPE html><html lang="zh-CN"><head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="preconnect" href="//www.googletagmanager.com">
	<link rel="preconnect" href="//zz.bdstatic.com">
	<link rel="preconnect" href="//sp0.baidu.com">
	<link rel="preconnect" href="//www.google-analytics.com">
	<link rel="preconnect" href="//cdn1.lncld.net">
	<link rel="preconnect" href="//unpkg.com">
	<link rel="preconnect" href="//app-router.leancloud.cn">
	<link rel="preconnect" href="//9qpuwspm.api.lncld.net">
	<link rel="preconnect" href="//gravatar.loli.net">

	<title>Gradio：轻松实现AI算法可视化部署 | 小林的思考薄</title>

	<meta name="HandheldFriendly" content="True">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
	<meta name="generator" content="hexo">
	<meta name="author" content="林泽毅kavin">
	<meta name="description" content="如何快速分享你的算法让人体验？试试Gradio。">

	
	<meta name="keywords" content="如何快速分享你的算法让人体验？试试Gradio。">
	

	
	<link rel="shortcut icon" href="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/%E7%84%95%E5%BD%B1-%E9%80%9A%E7%94%A8%E6%96%87%E4%BB%B6/%E5%90%84%E7%A7%8Dlogo/%E5%B0%8F%E7%84%95%E5%A4%B4%E5%83%8F_%E8%93%9D.PNG">
	<link rel="apple-touch-icon" href="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/%E7%84%95%E5%BD%B1-%E9%80%9A%E7%94%A8%E6%96%87%E4%BB%B6/%E5%90%84%E7%A7%8Dlogo/%E5%B0%8F%E7%84%95%E5%A4%B4%E5%83%8F_%E8%93%9D.PNG">
	

	
	<meta name="theme-color" content="#3c484e">
	<meta name="msapplication-TileColor" content="#3c484e">
	

	

	

	<meta property="og:site_name" content="小林的思考薄">
	<meta property="og:type" content="article">
	<meta property="og:title" content="Gradio：轻松实现AI算法可视化部署 | 小林的思考薄">
	<meta property="og:description" content="如何快速分享你的算法让人体验？试试Gradio。">
	<meta property="og:url" content="http://example.com/2021/05/21/Gradio%EF%BC%9A%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0ML%E6%A8%A1%E5%9E%8B%E5%8F%AF%E8%A7%86%E5%8C%96%E9%83%A8%E7%BD%B2/">

	
	<meta property="article:published_time" content="2021-05-21T14:05:42+08:00"> 
	<meta property="article:author" content="林泽毅kavin">
	<meta property="article:published_first" content="小林的思考薄, /2021/05/21/Gradio%EF%BC%9A%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0ML%E6%A8%A1%E5%9E%8B%E5%8F%AF%E8%A7%86%E5%8C%96%E9%83%A8%E7%BD%B2/">
	

	
	
	
<link rel="stylesheet" href="/css/allinonecss.min.css">


	
	
	
</head>

<body class="post-template">
	<div class="site-wrapper">
		




<header class="site-header post-site-header outer">
    <div class="inner">
        
<nav class="site-nav"> 
    <div class="site-nav-left">
        <ul class="nav">
            <li>
                
                <a href="/" title="Home">HOME</a>
                
            </li>
            
            
            <li>
                <a href="/about" title="ABOUT">ABOUT</a>
            </li>
            
            <li>
                <a href="/archives" title="ARCHIVES">ARCHIVES</a>
            </li>
            
            
        </ul> 
    </div>
    
    <div class="search-button-area">
        <a href="#search" class="search-button">Search ...</a>
    </div>
     
    <div class="site-nav-right">
        
        <a href="#search" class="search-button">Search ...</a>
         
        
<div class="social-links">
    
    
    
    
    
    
    
</div>
    </div>
</nav>
    </div>
</header>


<div id="site-main" class="site-main outer" role="main">
    <div class="inner">
        <header class="post-full-header">
            <div class="post-full-meta">
                <time class="post-full-meta-date" datetime="2021-05-21T06:35:47.429Z">
                    2021-05-21
                </time>
                
                <span class="date-divider">/</span>
                
                
            </div>
            <h1 class="post-full-title">Gradio：轻松实现AI算法可视化部署</h1>
        </header>
        <div class="post-full no-image">
            
            <div class="post-full-content">
                <article id="photoswipe" class="markdown-body">
                    <p><strong>如何将你的机器学习算法迅速分享给别人，让对方体验，一直是一件麻烦事儿。</strong></p>
<p>首先大部分人都是在本地跑代码，想要让别人使用你的模型，要么上github；要么将代码打包或者封装成docker用QQ/百度云传输；要么就是学些前后端知识，写个前端界面，买个域名，用flask这样微服务框架快速部署，也许还要结合一下内网穿透。</p>
<p>这些方案的问题在于——要么需要对方会编程，要么需要你会前后端开发，总结起来就是：<strong>麻烦</strong>。</p>
<p>那么有没有更好的解决方案呢？有！它就是小林今天要给大家安利的一个python开源库：<strong>Gradio</strong>。</p>
<p>​    <img alt="image-20210521152614971" class="post-img b-lazy" data-img="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0101.png" data-index="0" data-src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0101.png"></p>
<p>Gradio能够自动化的生成前端界面，定义好输入输出，只需要增加几行代码，一个web交互式页面就做好了。同时支持生成能外部网络访问的链接，能够迅速让你的朋友，同事体验你的算法，总结起来，它的优势有：</p>
<ul>
<li>自动生成页面且可交互</li>
<li>几行代码就能完成</li>
<li>支持生成可外部访问的链接进行分享</li>
</ul>
<h2 id="Get-start"><a href="#Get-start" class="headerlink" title="Get start"></a>Get start</h2><h3 id="0-安装Gradio"><a href="#0-安装Gradio" class="headerlink" title="0.安装Gradio"></a>0.安装Gradio</h3><figure class="highlight bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install gradio</span><br></pre></td></tr></tbody></table></figure>

<h3 id="1-写个简单的RGB转灰度"><a href="#1-写个简单的RGB转灰度" class="headerlink" title="1.写个简单的RGB转灰度"></a>1.写个简单的RGB转灰度</h3><figure class="highlight python"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> gradio <span class="keyword">as</span> gr</span><br><span class="line"><span class="keyword">import</span> cv2</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">to_black</span>(<span class="params">image</span>):</span></span><br><span class="line">    output = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)</span><br><span class="line">    <span class="keyword">return</span> output</span><br><span class="line"></span><br><span class="line">interface = gr.Interface(fn=to_black, inputs=<span class="string">"image"</span>, outputs=<span class="string">"image"</span>)</span><br><span class="line">interface.launch()</span><br></pre></td></tr></tbody></table></figure>

<p>gradio的核心是它的<code>gr.Interface</code>函数，用来构建可视化界面。</p>
<ul>
<li>fn：放你用来处理的函数</li>
<li>inputs：写你的输入类型，这里输入的是图像，所以是”image”</li>
<li>outputs：写你的输出类型，这里输出的是图像，所以是”image”</li>
</ul>
<p>最后我们用<code>interface.lauch()</code>把页面一发布，一个本地静态交互页面就完成了！</p>
<p>在浏览器输入<code>http://127.0.0.1:7860/</code>,查收你的页面：</p>
<p><img alt="image-20210521152336959" class="post-img b-lazy" data-img="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0102.png" data-index="1" data-src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0102.png"></p>
<p>上传一张图片，点击「SUBMIT」，大功告成。</p>
<p><img alt="image-20210521152500026" class="post-img b-lazy" data-img="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0103.png" data-index="2" data-src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0103.png"></p>
<p>对于任何图像处理类的ML代码来说，只要定义好一个图像输入&gt;&gt;模型推理&gt;&gt;返回图片的函数（逻辑和RGB转灰度图本质上没区别），放到<code>fn</code>中，就完事了。</p>
<p>​    </p>
<h3 id="2-增加example"><a href="#2-增加example" class="headerlink" title="2.增加example"></a>2.增加example</h3><p>我们可以在页面下方添加供用户选择的测试样例。</p>
<p>在<code>gr.Interface</code>里的<code>examples</code>中放入图片路径，格式为[[路径1],[路径2],…]。</p>
<figure class="highlight python"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> gradio <span class="keyword">as</span> gr</span><br><span class="line"><span class="keyword">import</span> cv2</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">to_black</span>(<span class="params">image</span>):</span></span><br><span class="line">    output = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)</span><br><span class="line">    <span class="keyword">return</span> output</span><br><span class="line"></span><br><span class="line">interface = gr.Interface(fn=to_black, inputs=<span class="string">"image"</span>, outputs=<span class="string">"image"</span>,</span><br><span class="line">                        examples=[[<span class="string">"test.png"</span>]])</span><br><span class="line">interface.launch()</span><br></pre></td></tr></tbody></table></figure>

<p><img alt="image-20210521155634673" class="post-img b-lazy" data-img="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0104.png" data-index="3" data-src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0104.png"></p>
<h2 id="3-创建一个外部访问链接"><a href="#3-创建一个外部访问链接" class="headerlink" title="3.创建一个外部访问链接"></a>3.创建一个外部访问链接</h2><p>创建外部访问链接非常简单，只需要<code>launch(share=True)</code>即可，在打印信息中会看到你的外部访问链接。</p>
<p>免费用户的链接可以使用24小时，想要长期的话需要在gradio官方购买云服务。</p>
<h2 id="4-升个级-图像分类pytorch-resnet18"><a href="#4-升个级-图像分类pytorch-resnet18" class="headerlink" title="4.升个级:图像分类pytorch+resnet18"></a>4.升个级:图像分类pytorch+resnet18</h2><figure class="highlight python"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> gradio <span class="keyword">as</span> gr</span><br><span class="line"><span class="keyword">import</span> torch</span><br><span class="line"><span class="keyword">from</span> torchvision <span class="keyword">import</span> transforms</span><br><span class="line"><span class="keyword">import</span> requests</span><br><span class="line"><span class="keyword">from</span> PIL <span class="keyword">import</span> Image</span><br><span class="line"></span><br><span class="line">model = torch.hub.load(<span class="string">'pytorch/vision:v0.6.0'</span>, <span class="string">'resnet18'</span>, pretrained=<span class="literal">True</span>).<span class="built_in">eval</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment"># Download human-readable labels for ImageNet.</span></span><br><span class="line">response = requests.get(<span class="string">"https://git.io/JJkYN"</span>)</span><br><span class="line">labels = response.text.split(<span class="string">"\n"</span>)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">predict</span>(<span class="params">inp</span>):</span></span><br><span class="line">  inp = Image.fromarray(inp.astype(<span class="string">'uint8'</span>), <span class="string">'RGB'</span>)</span><br><span class="line">  inp = transforms.ToTensor()(inp).unsqueeze(<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">with</span> torch.no_grad():</span><br><span class="line">    prediction = torch.nn.functional.softmax(model(inp)[<span class="number">0</span>], dim=<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">return</span> {labels[i]: <span class="built_in">float</span>(prediction[i]) <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1000</span>)}</span><br><span class="line"></span><br><span class="line">inputs = gr.inputs.Image()</span><br><span class="line">outputs = gr.outputs.Label(num_top_classes=<span class="number">3</span>)</span><br><span class="line">gr.Interface(fn=predict, inputs=inputs, outputs=outputs).launch()</span><br></pre></td></tr></tbody></table></figure>

<p><img alt="image-20210521160432207" class="post-img b-lazy" data-img="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0105.png" data-index="4" data-src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/blogs/01/0105.png"></p>
<p>ps:不得不说imagenet的类标真细</p>
<h2 id="5-了解更多"><a href="#5-了解更多" class="headerlink" title="5.了解更多"></a>5.了解更多</h2><ul>
<li><p>Gradio官网：<a target="_blank" rel="noopener" href="https://www.gradio.app/">https://www.gradio.app/</a></p>
</li>
<li><p>Gradio官方文档：<a target="_blank" rel="noopener" href="https://gradio.app/docs">https://gradio.app/docs</a></p>
</li>
<li><p>使用Gradio的项目「Anime2Sketch」：<a target="_blank" rel="noopener" href="https://www.gradio.app/hub/AK391/Anime2Sketch">https://www.gradio.app/hub/AK391/Anime2Sketch</a></p>
</li>
</ul>
<h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>Gradio的最大的价值我认为是缩短了算法与应用的距离，人人都能迅速分享与体验项目成果，这不管在同事交流，项目汇报，甚至是同学吹牛（大雾），都有性感多了。</p>
<p>同时，作为一个python库，不论是ML，还是数据分析，图像处理，甚至做一个视频转gif的小工具（自媒体老哥表示很有用），都能适用。</p>
<p><strong>你还在发愁怎么做大作业PPT汇报吗？不如试试Gradio。</strong></p>

                </article>
                <ul class="tags-postTags">
                    
                    <li>
                        <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" rel="tag"># 机器学习</a>
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>

    
    <nav id="gobottom" class="pagination">
        
        <span class="prev-next-post">·</span>
        
    </nav>

    
    <div class="inner">
        <div id="comment"></div>
    </div>
    
</div>

<div class="toc-bar">
    <div class="toc-btn-bar">
        <a href="#site-main" class="toc-btn">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M793.024 710.272a32 32 0 1 0 45.952-44.544l-310.304-320a32 32 0 0 0-46.4 0.48l-297.696 320a32 32 0 0 0 46.848 43.584l274.752-295.328 286.848 295.808z"></path></svg>
        </a>
        <div class="toc-btn toc-switch">
            <svg class="toc-open" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M779.776 480h-387.2a32 32 0 0 0 0 64h387.2a32 32 0 0 0 0-64M779.776 672h-387.2a32 32 0 0 0 0 64h387.2a32 32 0 0 0 0-64M256 288a32 32 0 1 0 0 64 32 32 0 0 0 0-64M392.576 352h387.2a32 32 0 0 0 0-64h-387.2a32 32 0 0 0 0 64M256 480a32 32 0 1 0 0 64 32 32 0 0 0 0-64M256 672a32 32 0 1 0 0 64 32 32 0 0 0 0-64"></path></svg>
            <svg class="toc-close hide" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"></path><path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"></path></svg>
        </div>
        <a href="#gobottom" class="toc-btn">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M231.424 346.208a32 32 0 0 0-46.848 43.584l297.696 320a32 32 0 0 0 46.4 0.48l310.304-320a32 32 0 1 0-45.952-44.544l-286.848 295.808-274.752-295.36z"></path></svg>
        </a>
    </div>
    <div class="toc-main">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Get-start"><span class="toc-text">Get start</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#0-%E5%AE%89%E8%A3%85Gradio"><span class="toc-text">0.安装Gradio</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%86%99%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84RGB%E8%BD%AC%E7%81%B0%E5%BA%A6"><span class="toc-text">1.写个简单的RGB转灰度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A2%9E%E5%8A%A0example"><span class="toc-text">2.增加example</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%A4%96%E9%83%A8%E8%AE%BF%E9%97%AE%E9%93%BE%E6%8E%A5"><span class="toc-text">3.创建一个外部访问链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%8D%87%E4%B8%AA%E7%BA%A7-%E5%9B%BE%E5%83%8F%E5%88%86%E7%B1%BBpytorch-resnet18"><span class="toc-text">4.升个级:图像分类pytorch+resnet18</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E4%BA%86%E8%A7%A3%E6%9B%B4%E5%A4%9A"><span class="toc-text">5.了解更多</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E"><span class="toc-text">写在最后</span></a></li></ol>
    </div>
</div>



<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>




	</div>
	


<aside class="read-next outer">
    <div class="inner">
        <div class="read-next-feed">
            
            

<article class="read-next-card" style="background-image: url(https://inkfishing.oss-cn-hangzhou.aliyuncs.com/%E7%84%95%E5%BD%B1-%E9%80%9A%E7%94%A8%E6%96%87%E4%BB%B6/background_v2.png)">
  <header class="read-next-card-header">
    <small class="read-next-card-header-sitetitle">— 小林的思考薄 —</small>
    <h3 class="read-next-card-header-title">最新文章</h3>
  </header>
  <div class="read-next-divider">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"></path>
    </svg>
  </div>
  <div class="read-next-card-content">
    <ul>
      
      
      
      <li>
        <a href="/2021/05/21/Gradio%EF%BC%9A%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0ML%E6%A8%A1%E5%9E%8B%E5%8F%AF%E8%A7%86%E5%8C%96%E9%83%A8%E7%BD%B2/">Gradio：轻松实现AI算法可视化部署</a>
      </li>
      
      
    </ul>
  </div>
  <footer class="read-next-card-footer">
    <a href="/archives">  MORE  → </a>
  </footer>
</article>

            
            
            


            
            
            

<article class="read-next-card" style="background-image: url(https://inkfishing.oss-cn-hangzhou.aliyuncs.com/%E7%84%95%E5%BD%B1-%E9%80%9A%E7%94%A8%E6%96%87%E4%BB%B6/background_v2.png)">
	<header class="read-next-card-header tagcloud-card">
		<h3 class="read-next-card-header-title">标签云</h3>
	</header>
	<div class="read-next-card-content-ext">
		<a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size: 14px;">机器学习</a>
	</div>
</article>

            
        </div>
    </div>
</aside>

	




<div id="search" class="search-overlay">
    <div class="search-form">
        
        <div class="search-overlay-logo">
        	<img src="https://inkfishing.oss-cn-hangzhou.aliyuncs.com/%E7%84%95%E5%BD%B1-%E9%80%9A%E7%94%A8%E6%96%87%E4%BB%B6/%E5%90%84%E7%A7%8Dlogo/%E5%B0%8F%E7%84%95%E5%A4%B4%E5%83%8F_%E8%93%9D.PNG" alt="小林的思考薄">
        </div>
        
        <input id="local-search-input" class="search-input" type="text" name="search" placeholder="搜索 ...">
        <a class="search-overlay-close" href="#"></a>
    </div>
    <div id="local-search-result"></div>
</div>

<footer class="site-footer outer">
	<div class="site-footer-content inner">
		<div class="copyright">
			<a href="/" title="小林的思考薄">小林的思考薄 © 2021</a>
			
				
			        <span hidden="true" id="/2021/05/21/Gradio%EF%BC%9A%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0ML%E6%A8%A1%E5%9E%8B%E5%8F%AF%E8%A7%86%E5%8C%96%E9%83%A8%E7%BD%B2/" class="leancloud-visitors" data-flag-title="Gradio：轻松实现AI算法可视化部署">
			            <span>阅读量 </span>
			            <span class="leancloud-visitors-count">0</span>
			        </span>
	    		
    		
		</div>
		<nav class="site-footer-nav">
			
			<a href="https://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
			<a href="https://github.com/xzhih/hexo-theme-casper" title="Casper" target="_blank" rel="noopener">Casper</a>
		</nav>
	</div>
</footer>
	


<script>
    if(window.navigator && navigator.serviceWorker) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
            for(let registration of registrations) {
                registration.unregister()
            }
        })
    }
</script>


<script id="scriptLoad" src="/js/allinone.min.js" async=""></script>


<script>
    document.getElementById('scriptLoad').addEventListener('load', function () {
        
        
            var bLazy = new Blazy();
        

        
        

        
        
        
            searchFunc("/");
        
        
    })
</script>




<link rel="stylesheet" href="/photoswipe/photoswipe.css">


<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">


<script src="/photoswipe/photoswipe.min.js"></script>


<script src="/photoswipe/photoswipe-ui-default.min.js"></script>





<script id="valineScript" src="//unpkg.com/valine/dist/Valine.min.js" async=""></script>
<script>
    document.getElementById('valineScript').addEventListener("load", function() {
        new Valine({
            el: '#comment' ,
            verify: false,
            notify: false,
            appId: '',
            appKey: '',
            placeholder: 'Just go go',
            pageSize: 10,
            avatar: 'mm',
            visitor: true
        })
    });
</script>







</body></html>